<script>
import { mapState } from 'vuex'
import { institutionTypeArray } from '@/constants/essentialData/organization'

export default {
  name: 'organization',
  data() {
    return {
      institutionTypeArray,
      // 加载效果
      loading: true,
      // 机构列表tree数组
      treeList: [],
      // 当前机构的ID
      currentTreeId: '',
      /* 获取员工分页参数 */
      pageParams: {
        // 页码
        page: 1,
        // 页尺寸
        pageSize: 10,
        // 机构ID
        agencyId: '',
        // 电话
        phone: null,
        // 司机名称
        name: null,
        // 司机编号 账号
        account: null
      },
      /* 机构详情 */
      institutionDetail: {},
      /* 省份 */
      province: [],
      /* 市区 */
      city: [],
      /* 区 */
      county: [],
      /* 编辑模式 */
      edit: false
    }
  },
  methods: {
    /*
    * 格式化机构信息
    *  */
    formatterAgency(row) {
      return row.name
    },
    /*
    * 获取树状机构信息的回调函数
    *  */
    async fetchInstitutionTree() {
      try {
        const treeList = await this.$store.dispatch('organizationStore/fetchInstitutionTreeAction')
        this.treeList = treeList
        this.pageParams.agencyId = treeList[0].id
        this.currentTreeId = treeList[0].id
        this.$nextTick(async() => {
          this.$refs.treeRef.setCurrentKey(this.pageParams.agencyId)
          this.fetchEmployeeList()
          await this.fetchInstitutionDetail()
          /* 获取市 */
          this.fetchAddressList(this.institutionDetail.province.id).then(city => {
            this.city = city
          })
          /* 获取县 */
          this.fetchAddressList(this.institutionDetail.city.id).then(county => {
            this.county = county
          })
        })
      } catch (error) {
        this.$message.error(error.message)
      } finally {

      }
    },
    /*
    * 获取机构详情的回调函数
    *  */
    async fetchInstitutionDetail() {
      try {
        const institutionDetail = await this.$store.dispatch('organizationStore/fetchInstitutionDetailAction', this.pageParams.agencyId)
        this.institutionDetail = institutionDetail
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 获取员工分页列表的回调函数
    *  */
    async fetchEmployeeList() {
      try {
        this.loading = true
        await this.$store.dispatch('organizationStore/fetchEmployeeListAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    },

    /*
    *pageSize发生变化的回调函数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchEmployeeList()

    },
    /*
    *page发生变化的回调函数
    *  */
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchEmployeeList()
    },

    /*
    *节点被点击时的回调
    *  */
    async nodeClick(node) {
      this.pageParams.agencyId = node.id
      this.fetchEmployeeList()
      await this.fetchInstitutionDetail()
      /* 获取市 */
      this.fetchAddressList(this.institutionDetail.province.id).then(city => {
        this.city = city
      })
      /* 获取县 */
      this.fetchAddressList(this.institutionDetail.city.id).then(county => {
        this.county = county
      })
    },

    /*
    *获取地址信息的回调函数
    *  */
    async fetchAddressList(parentId) {
      try {
        return await this.$store.dispatch('organizationStore/fetchAddressListAction', parentId)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 编辑机构信息的回调函数
    *  */
    async updateInstitution() {
      try {
        const data = {
          address: this.institutionDetail.address,
          provinceId: this.institutionDetail.province.id,
          cityId: this.institutionDetail.city.id,
          countyId: this.institutionDetail.county.id,
          managerName: this.institutionDetail.managerName,
          name: this.institutionDetail.name,
          phone: this.institutionDetail.phone,
          id: this.institutionDetail.id,
          type: this.institutionDetail.type
        }
        await this.$store.dispatch('organizationStore/updateInstitutionAction', data)
        this.fetchInstitutionDetail()
      } catch (error) {
        this.$message.error('演示数据暂时不能修改')
      } finally {
        this.edit = false
      }
    },

    fetchpCity() {
      this.fetchAddressList(this.institutionDetail.province.id).then(city => {
        this.city = city
      })
    },

    fetchCounty() {
      this.fetchAddressList(this.institutionDetail.city.id).then(county => {
        this.county = county
      })
    },

    handleSubmit() {
      this.updateInstitution()
    }
  },
  computed: {
    ...mapState('organizationStore', ['counts', 'employeeList'])
  },
  mounted() {
    this.fetchInstitutionTree()
    /* 获取省 */
    this.fetchAddressList().then(province => {
      this.province = province
    })
  }

}
</script>

<template>
  <div class="organization">
    <div class="left" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-card shadow="never" class="card-tree">
        <el-tree class="filter-tree customer-tree-box" icon-class="el-icon-folder-opened" highlight-current ref="treeRef" node-key="id" :data="treeList" default-expand-all @node-click="nodeClick">
          <template #default="{node,data}">
            <span>{{ data.name }}</span>
          </template>
        </el-tree>
      </el-card>
    </div>
    <div class="right" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255,255,255)">
      <el-card shadow="never" class="top">
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
        <el-form inline label-width="100px" :model="institutionDetail">
          <el-form-item label="机构的编号">
            <el-input :disabled="!edit" v-model="institutionDetail.id"></el-input>
          </el-form-item>
          <el-form-item label="机构的名称">
            <el-input :disabled="!edit" v-model="institutionDetail.name"></el-input>
          </el-form-item>
          <el-form-item label="机构的类型">
            <el-select :disabled="!edit" v-model="institutionDetail.type">
              <el-option v-for="(item) in institutionTypeArray" :value="item.type" :label="item.name" :key="item.type"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构所属省" v-if="institutionDetail.province">
            <el-select :disabled="!edit" v-model="institutionDetail.province.id" @change="fetchpCity">
              <el-option v-for="item in province" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构所属市" v-if="institutionDetail.city">
            <el-select :disabled="!edit" v-model="institutionDetail.city.id" @change="fetchCounty">
              <el-option v-for="item in city" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="机构所属县" v-if="institutionDetail.county">
            <el-select :disabled="!edit" v-model="institutionDetail.county.id">
              <el-option v-for="item in county" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细的地址">
            <el-input :disabled="!edit" v-model="institutionDetail.address"></el-input>
          </el-form-item>
          <el-form-item label="所属的经度">
            <el-input disabled v-model="institutionDetail.longitude"></el-input>
          </el-form-item>
          <el-form-item label="所属的纬度">
            <el-input disabled v-model="institutionDetail.latitude"></el-input>
          </el-form-item>
          <el-form-item label="机构负责人">
            <el-input :disabled="!edit" v-model="institutionDetail.managerName"></el-input>
          </el-form-item>
          <el-form-item label="机构的电话">
            <el-input :disabled="!edit" v-model="institutionDetail.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="edit=true" v-if="!edit">编辑机构信息</el-button>
            <el-button type="primary" @click="handleSubmit" v-else>保存机构信息</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="never" class="bottom">
        <div slot="header" class="clearfix">
          <span>员工信息</span>
        </div>
        <el-table :data="employeeList" border stripe :header-cell-style="{background:'#f4f6f8',color:'#969393'}">
          <el-table-column width="50px" type="index" label="序号" align="center"></el-table-column>
          <el-table-column prop="userId" label="员工编号" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
          <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
          <el-table-column :formatter="formatterAgency" label="所属机构" align="center"></el-table-column>
          <el-table-column prop="account" label="系统账号" align="center"></el-table-column>
          <el-table-column prop="roleNames" label="系统角色" align="center"></el-table-column>
          <el-table-column label="账号状态" align="center">
            <template #default="{row}">
              {{ row.statue === 0 ? '禁用' : '正常' }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 15, 20, 25]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" background></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.organization {
  display: flex;
  margin: 20px;

  .left {
    width: 220px;

  }

  .right {
    flex: 1;
    margin-left: 10px;


    .top {
      .el-input {
        width: 203px !important;
      }
    }

    .bottom {
      margin-top: 20px;

      .el-table {
        margin-bottom: 10px;
      }

      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
